<template>
  <div class="questionView">
    <div class="questionBack">
      <p v-if="mix == 1" class="typeLabel">{{question.resultType == 1 ? '单选' : '多选'}}</p>
      <p class="questionLabel">{{question.title}}</p>
    </div>

    <div v-for="(el, idx) in selectOptions" @click="optionClick(idx)">

      <div v-if="type === 1">
        <!--答案模式-->
        <div v-if="chooseClass(el.selectName) === true" :class="chooseResult(el.selectName) + ' result'">
          <img class="imgView" :src="chooseResultIcon(el.selectName)"/>
          <p class="label_s">{{el.selectName}}.{{el.result}}</p>
        </div>
        <div v-else :class="chooseResult(el.selectName) + ' result'">
          <img class="imgView" :src="chooseResultIcon(el.selectName)"/>
          <p class="label">{{el.selectName}}.{{el.result}}</p>
        </div>
      </div>
      <div v-else>
        <!--答题模式-->
        <div v-if="chooseClass(el.selectName) === true" class="optionView">
          <img class="imgView" src="/web-hft-ee/static/img/pc/pitch_on.png"/>
          <p class="label_s">{{el.selectName}}.{{el.result}}</p>
        </div>
        <div v-else class="optionView">
          <img class="imgView" src="/web-hft-ee/static/img/pc/unselected.png"/>
          <p class="label">{{el.selectName}}.{{el.result}}</p>
        </div>
      </div>

    </div>

    <div v-if="type === 2 && question.resultType == 2" class="resultBtn" @click="resultBtnClick">确认</div>
    <div v-else-if="type === 1" class="analyzeView">
      <analyze-item-m :answer="answer" :result="question.result" :analyse="question.resultAnalysis"></analyze-item-m>
    </div>

  </div>
</template>

<script>

  import AnalyzeItemM from './AnalyzeItemM'

  //examType 1:统筹考试 2:普通考试 3:模拟考试 4:题库练习 5:错题库 6:题目分析
  //answer 用户选择的答案,类型为[]适用多选
  //mix 0为单选多选题，1为综合题
  export default {
    name: 'Question-pc',
    props: {
      question: {
        default () {
          return {}
        }
      },
      answer: {
        default () {
          return {}
        }
      },
      examType: {
        default () {
          return 1
        }
      },
      mix: {
        default () {
          return 0
        }
      },
    },
    components: {
      AnalyzeItemM
    },
    mounted () {

    },
    computed: {
      //type 0答题模式 1答案模式 2练习模式
      type () {
        if (this.examType == 6) {
          return 1
        } else if (this.examType == 4 || this.examType == 5) {
          if (this.answer.status == 1) {
            return 1
          } else {
            return 2
          }
        }
        return 0
      },
      selectOptions () {
        let options = this.question.selectOption
        return JSON.parse(options)
      }
    },
    methods: {
      chooseClass (selected) {
        let answerList = this.answer.answer || []
        if (answerList.indexOf(selected) > -1) {
          return true
        }
        return false
      },
      //答题模式图标
      chooseResultIcon (selected) {

        let resultList = [...JSON.parse(this.question.result)].sort()
        let answerList = [...this.answer.answer || []].sort()

        if (resultList.indexOf(selected) > -1) {
          return '/web-hft-ee/static/img/pc/rightcheck.png'
        } else if (answerList.indexOf(selected) > -1) {
          return '/web-hft-ee/static/img/pc/wrong.png'
        } else {
          return '/web-hft-ee/static/img/pc/unselected.png'
        }

      },
      //答题模式判断答案正误 返回选项的class样式
      chooseResult (selected) {

        let resultList = [...JSON.parse(this.question.result)].sort()
        let answerList = [...this.answer.answer || []].sort()

        if (resultList.indexOf(selected) > -1) {
          return 'result_right'
        } else if (answerList.indexOf(selected) > -1) {
          return 'result_wrong'
        } else {
          return 'result_normal'
        }

      },
      optionClick (idx) {
        if (this.type == 1) {
          return
        }
        let dic = this.selectOptions[idx]
        if (this.question.resultType == 1) {
          //单选
          if (this.type === 2) {
            //练习模式 多增加一个标志
            this.$emit('sendOptionClick', this.question, {'status': '1', 'answer': [dic.selectName]})
          } else {
            this.$emit('sendOptionClick', this.question, {'answer': [dic.selectName]})
          }

        } else {
          //多选
          let answerList = this.answer.answer || []

          let index = answerList.indexOf(dic.selectName)
          if (index > -1) {
            answerList.splice(index, 1)
          } else {
            answerList.push(dic.selectName)
          }
          this.$emit('sendOptionClick', this.question, answerList.length > 0 ? {'answer': answerList} : {})
        }

      },
      resultBtnClick () {
        let answerList = this.answer.answer || []
        this.$emit('sendOptionClick', this.question, {'status': '1', 'answer': answerList})
      }
    }
  }
</script>

<style scoped>
  .questionView {
    box-sizing: border-box;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .questionBack {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
  }

  .typeLabel {
    font-size: 14px;
    padding: 2px 6px;
    background-color: #009944;
    color: white;
    margin-right: 8px;
    border-radius: 4px;
  }

  .questionLabel {
    flex: 1;
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 8px;
  }

  .optionView {
    box-sizing: border-box;

    padding: 4px;
    margin: 4px 0;
    display: flex;
    flex-direction: row;
    align-items: center;

  }

  .imgView {
    width: 17px;
    height: 16px;
  }

  .label {
    margin-left: 12px;
    font-size: 16px;
    line-height: 22px;
    color: #666666;
    word-break: break-all;
    flex: 1;
  }

  .label_s {
    margin-left: 12px;
    font-size: 16px;
    line-height: 22px;
    color: #1286F7;
    word-break: break-all;
    flex: 1;
  }

  .resultBtn {
    width: 64px;
    font-size: 14px;
    color: white;
    background-color: #1286F7;
    margin-top: 8px;
    line-height: 28px;
    text-align: center;
    border-radius: 4px;
  }

  .analyzeView {
    margin-top: 20px;
  }

  .result {
    padding: 4px;
    margin: 4px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .result_right {
    background-color: #00CC99;
    border-radius: 4px;
  }
  .result_right p {
    color: white;
  }

  .result_wrong {
    border-radius: 4px;
    background-color: #FF3300;
  }

  .result_wrong p {
    color: white;
  }

  .result_normal {

  }

</style>
